<template>
  <div class="observable">
    <h4>简单实用vue.observable()方法</h4>
    <div class="obser-wrap">
      <button @click="setCount(count+1)" class="mb-10">{{count}}</button>
      <br />
      <button @click="changeName('pzy')" class="mb-10">子页面修改name</button>
      <br />
      <p>store中name：{{name}}</p>
    </div>
  </div>
</template>
<script>
import { state, mutations } from "@store/observable/index";
export default {
  name: "Observable",
  data() {
    return {};
  },
  computed: {
    //如果store中的数据发生变化重新计算
    count() {
      return state.count;
    },
    name() {
      return state.name;
    }
  },
  methods: {
    // 将store中的mutations方法赋值拿到
    setCount: mutations.setCount,
    changeName: mutations.changeName
  },
  mounted() {}
};
</script>
<style lang="stylus" scoped>
.observable {
}
</style>